<template>
	<view class="container assistant-listlog-container">
		<searchVue placeholder="搜索医馆、科室、诊断结果" @clickSearch="searchFn" />
		<view class="page-main">
			<view class="page-list" v-for="item in pageList" :key="item.id">
				<view class="list-title">{{item.consultationDate}}</view>
				<view class="list-main">
					<view class="info-list">
						<text class="info-title">科室：</text>
						<text class="info-words">{{item.department}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">诊断：</text>
						<text class="info-words">{{item.diagnosisResult}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">就诊时间：</text>
						<text class="info-words">{{$format(item.visitTime)}}</text>
					</view>
				</view>
				<!-- <view class="list-bottom">
					<view class="yuan-btn btn-default">查看详情</view>
				</view> -->

			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import searchVue from "@/components/search.vue"
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '../../common/util';
	import userApi from '../../common/userApi';
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageList = ref([])
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	onMounted(() => {
		getPageList()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize, keyword }
			const res = await userApi.getMyMedicalRecords(params)
			const data = res.data || []
			//if (data.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(data)

		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	let keyword = ''
	const searchFn = (searchKeyword : string) => {
		keyword = searchKeyword
		refreshList()
	}
</script>

<style lang="scss">
	.assistant-listlog-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding: 30rpx;
		padding-bottom: 120rpx;

		.page-main {
			margin-top: 10rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(100, 100, 100, 0.1);
			padding: 20rpx;
		}

		.list-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #202020;
			padding-bottom: 20rpx;
			border-bottom: solid 1px rgba(232, 232, 232, 1);
		}

		.list-main {
			padding: 20rpx 0;
		}

		.info-list {
			margin: 10rpx 0;
		}

		.info-title {
			font-size: 28rpx;
			color: #6D6D6D;
		}

		.info-words {
			font-size: 28rpx;
			color: #222222;
		}

		.list-bottom {
			border-top: solid 1px rgba(232, 232, 232, 1);
			padding-top: 20rpx;
			text-align: right;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
			}
		}
	}
</style>